<template>
  <div>
    <ul>
      <li v-for="(item, index) in list" :key="index">
        <input type="checkbox"  style="margin-right:20px"  v-model="item.checked">
        <span>{{ item.name }}</span>
        <span style="margin-left:20px;margin-right:20px">{{ item.price }}</span>
        <button  style="width:20px" @click='jian(index)'>-</button>
        <input type="text"  v-model="item.num"  style="margin-left:5px;margin-right:5px;width:20px">
         <button style="width:20px" @click='jia(index)'>+</button>
        <span style="margin-left:30px;">{{ item.price * item.num }}</span>
      </li>

       <div> 总价:{{getsum}}</div>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
        
      list: [
        { name: "苹果", price: 10, num: 1, checked: false},
        { name: "香蕉", price: 12, num: 1, checked: false },
        { name: "葡萄", price: 15, num: 1, checked: false },
        { name: "芒果", price: 30, num: 1, checked: false },
      ],
    };
  },
  methods:{
    jian(a){
        if(this.list[a].num!=0){
          this.list[a].num--
        }
    },
    jia(a){
        this.list[a].num++
    }
  },
  computed:{
     getsum(){
         var num=0
        for(let i=0;i<this.list.length;i++){
            if(this.list[i].checked){
              num+=  this.list[i].price*this.list[i].num
            }
        }
        return num
     }
  },
  mounted(){
   
  }
};
</script>
